
 <script setup>
    import { onMounted, ref } from 'vue';
    import {getProductListService,searchProductTimeService} from '@/api/product.js'
    // import axios from 'axios';

    // import request from '@/utils/request.js'
    // const baseUrl = "http://localhost:7012";  
    // const instance = axios.create(baseUrl);
    // const msg = ref('淄博');

//定义响应式数据，用来接收服务器返回的json数据
    const productlist = ref([]);

//定义响应参数数据
    const searchParams = ref({
        startTime: "",
        endTime: "",
        soCode: "CP-48718"

    })

    const count = ref(0); //声明响应式变量，默认为0   
    function increment(){  //声明函数
        count.value++;
        console.log("click ....");
    }

    function searchData(){

        console.log("search data ....");
        //请求搜索接口，然后返回数据
        getSearchData(searchParams.value);

    }

//异步获取列表的接口
    async function getProductData(){


        let data =  await getProductListService();
        productlist.value = data;

         // 获取产品称重接口的数据
        // return await axios.get("/api/productWeight/list",{params:{pageNo:1,pageSize:10}})
        // .then(response =>{
        //     // debugger
        //     console.log(response.data.result);
        //     productlist.value = response.data.result;
        //     return response.data.result;
        // }).catch(err =>{
        //     console.log(" error = "+err);
        //     return err;
        // });
    }

//异步获取搜索数据的接口
     async function getSearchData(conditions){

        let searchdata = await searchProductTimeService(conditions);
        productlist.value = searchdata;

         // 获取产品称重接口的数据
        // return await axios.post("/api/productWeight/queryByBillcode",searchParams)
        // .then(response =>{
        //     console.log("search data = "+response.data);
        //     productlist.value = response.data.result;
        //     return response.data.result;
        // }).catch(err =>{
        //     console.log(" search error = "+err);
        //     return err;
        // });
    }

    onMounted(()=>{
        console.log('Vue mounted....');
       getProductData();
    })



</script>

<template>

    <div>

       开始时间：<input type = "text" v-model="searchParams.startTime">
       结束时间：<input type = "text" v-model="searchParams.endTime">
       订单编号：<input type = "text" v-model="searchParams.soCode">
       <button @click="searchData">搜索</button>
           <button @click="increment"> 点击:{{ count}} </button>

       <br/>

       <table border="1 solid" colspa="0" cellspacing ="0">
          <tr>
            <th>订单号</th>
            <th>物料编码</th>
            <th>物料名称</th>
            <th>称重1</th>
            <th>称重2</th>
            <th>称重3</th>
            <th>创建人</th>
            <th>创建时间</th>
            <th>修改人</th>
            <th>修改时间</th>
          </tr>
          <tr v-for="(product,index) in productlist">
            <td>{{product.socode}}</td>
            <td>{{product.invcode}}</td>
            <td>{{product.matiraName}}</td>
            <td>{{product.grossweight1}}</td>
            <td>{{product.grossweight2}}</td>
            <td>{{product.grossweight3}}</td>
            <td>{{product.createdby}}</td>
            <td>{{product.createdon}}</td>
            <td>{{product.lastupdateby}}</td>
            <td>{{product.lastupdateon}}</td>
         </tr>
       </table>


    </div>

   
</template>

